<template>
  <div>
    <div class="mb-3">
      <el-form class="query-form" :inline="true" :model="params">
        <el-form-item label="项目名称查询">
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable>
            <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="生成条件名称查询">
          <el-input v-model="params.produce_cond_name" placeholder="生成条件名称查询" clearable>
            <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="dialogImportVisible = true">
            <i class="fa fa-fw fa-upload"></i>
            导入生产条件
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <loading-wrap>
      <el-table border :data="tableData">
        <el-table-column align="center" label="贷款主体证件号">
          <template slot-scope="scope">
            {{ scope.row.lender_idcard }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目名称" prop="customer_name">
          <template slot-scope="scope">
            <span>{{ scope.row.customer_name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="produce_cond_name">
          <template slot-scope="scope">
            <span>{{ scope.row.produce_cond_name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            {{ enumProductStatusType[scope.row.produce_status] || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="性质">
          <template slot-scope="scope">
            {{ enumProduceNatureType[scope.row.nature_type] || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量" prop="area">
          <template slot-scope="scope">
            {{ scope.row.area || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="单位" prop="unit">
          <template slot-scope="scope">
            {{ scope.row.unit || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="权证情况">
          <template slot-scope="scope">
            {{ enumProductWarrantType[scope.row.is_warrant] || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="场地情况">
          <template slot-scope="scope">
            {{ enumProductSitType[scope.row.sit_cond_type] || '-' }}
          </template>
        </el-table-column>
        <!--v-if="form.farm_type !== '3'"-->
        <el-table-column align="center" label="程度" prop="sit_cond_coll_type">
          <template slot-scope="scope">
            <span v-if="scope.row.sit_cond_type === '1'">
              {{ enumProductSitCollType[scope.row.sit_cond_coll_type] }}
            </span>
            <span v-else>{{ enumProductTuyereType[scope.row.tuyere_type] || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="投入时间">
          <template slot-scope="scope">
            <span v-if="scope.row.start_date">
              {{ $utils.dateFormat(scope.row.start_date, 'yyyy.MM.dd') }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="剩余价值">
          <template slot-scope="scope">
            <span>{{ scope.row.left_value | pureUnit('万元') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="剩余年限" prop="left_years">
          <template slot-scope="scope">
            {{ scope.row.left_years || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="地理位置" prop="address_detail">
          <template slot-scope="scope">
            {{ scope.row.address_detail || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark">
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
        <!--<el-table-column-->
        <!--align="center"-->
        <!--label="操作">-->
        <!--<template-->
        <!--slot-scope="scope">-->
        <!--<el-button v-if="scope.row.customer_related_id === 'relatedId'" class="py-0 px-2"-->
        <!--type="text"-->
        <!--@click="eventuate(scope.row)">-->
        <!--归集-->
        <!--</el-button>-->
        <!--<span v-else>已归集</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <div class="query-pagination">
        <el-pagination
          @current-change="getData"
          :current-page.sync="params.index"
          :page-size="params.size"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </loading-wrap>

    <form-component
      ref="fc"
      :auto-init="false"
      :form-data="formData"
      :table-data="editData"
      :table-id="tableId"
      :table-name="tableName"
      :visible.sync="editVisible"
      @success="getData"
    ></form-component>

    <import-excel
      :visible.sync="dialogImportVisible"
      title="导入生产条件信息"
      :post-api="postUrl"
      excel-template="/static/files/生产条件导入模板.xlsx"
      @success="handleImportSucess"
    ></import-excel>
  </div>
</template>
<script>
import SelectUnit from '@/credit/components/select/SelectUnit'
import FormComponent from '@/components/FormComponent'
import ImportExcel from '@/components/ImportExcel'
import {
  enumProduceNatureType,
  enumProductSitCollType,
  enumProductSitType,
  enumProductTuyereType,
  enumProductWarrantType,
  enumProductStatusType,
} from '@/credit/plugins/enum'

const enumUnit = {
  unit1: '亩',
  unit2: '平方米',
  unit3: '立方米',
}

export default {
  components: {
    FormComponent,
    ImportExcel,
  },
  props: {},
  data() {
    return {
      dialogImportVisible: false,
      postUrl: '',
      enumProduceNatureType,
      enumProductWarrantType,
      enumProductSitType,
      enumProductTuyereType,
      enumProductSitCollType,
      enumProductStatusType,
      totalCount: 0,
      tableData: [],
      editVisible: false,
      tableName: 'datum_customer_business_produce',
      tableId: '',
      editData: {},
      formData: {
        produce_cond_name: {
          type: 'component',
          label: '场地名称',
          value: '',
          component: SelectUnit,
          required: true,
          attrs: { css: 'form-control-ml' },
        },
        produce_status: {
          type: 'radio',
          label: '状态',
          value: 1,
          inline: true,
          enumType: enumProductStatusType,
          required: true,
        },
        nature_type: {
          type: 'radio',
          label: '性质',
          value: 1,
          inline: true,
          enumType: enumProduceNatureType,
          required: true,
        },
        is_warrant: {
          type: 'radio',
          label: '权证情况',
          value: 0,
          inline: true,
          enumType: enumProductWarrantType,
          required: true,
        },
        area: { type: 'number', label: '数量', value: '' },
        unit: {
          type: 'dropdown',
          label: '单位',
          value: '',
          enumType: enumUnit,
          required: false,
          attrs: { css: 'form-control-ml' },
        },
        sit_cond_type: {
          type: 'radio',
          label: '场地情况',
          value: '0',
          inline: true,
          enumType: enumProductSitType,
          onClick: v => {
            const type = +v === 1
            const ref = this.$refs.fc
            ref.setKey('sit_cond_coll_type', 'hide', !type, '0')
            ref.setKey('tuyere_type', 'hide', type, '0')
          },
        },
        sit_cond_coll_type: {
          type: 'radio',
          label: '程度',
          value: '0',
          enumType: enumProductSitCollType,
        },
        tuyere_type: {
          type: 'radio',
          label: '程度',
          value: '0',
          inline: true,
          enumType: enumProductTuyereType,
          hide: true,
        },
        start_date: { type: 'date', label: '投入时间', value: '' },
        left_value: { type: 'number', label: '剩余价值', value: '', unit: '万元' },
        left_years: { type: 'number', label: '剩余年限', value: '', unit: '年', step: 1 },
        address_detail: { type: 'text', label: '地址', value: '' },
        remark: { type: 'text', label: '备注', value: '' },
      },
      dialogVisible: false,
      params: {
        index: 1,
        size: 10,
        address_code: '',
        customer_name: '',
        produce_cond_name: '',
        'service_id.eq': '',
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.postUrl =
      '/api/credit/import/?importKey=datum_customer_business_produce_template&where=' +
      encodeURIComponent(
        '"datum_customer_business_produce.service_id".eq(' + this.$store.getters.org.clientId + ')'
      ) +
      encodeURIComponent('&"datum_customer_business_produce.customer_related_id".eq(relatedId)')

    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.params['service_id.eq'] = this.$store.getters.org.clientId
      this.$api
        .getData('credit', this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.totalCount = (res && res.data && res.data.totalCount) || 0
        })
    },
    async eventuate(row) {
      row.customer_related_id = 'relatedIdUpdate'
      let [res, err] = await this.$utils.promise(
        this.$api.updateData('credit', 'datum_customer_business_produce', row.id, row)
      )
      if (res) {
        this.$message.success('归集成功！')
        this.getLevelReview()
      } else {
        this.$message.error(`归集失败，请重试！（${err.status}）`)
      }
    },
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.id : ''
      this.editData = p || {}
    },
    // 导入
    handleImportSucess() {
      this.getData()
      this.dialogImportVisible = false
    },
    deleteData(item) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('span', undefined, `确定删除？`),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            const [res] = await this.$utils.promise(
              this.$api.deleteData('credit', this.tableName, item.id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
            if (res) {
              this.$message.success('删除成功！')
              this.getData()
              done()
            } else {
              this.$message.error('删除失败，请重试！')
            }
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style scoped></style>
